<template>
	<view>
		<view class="title-header" @click="emit('click')" :style="calcBg()">
			<view class="title-text" :style="calcColor()"> {{title}} </view>
		</view>
	</view>
</template>
<script setup>
	const app = getApp();
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const emit = defineEmits(['click']);
	const props = defineProps({
		bgImg: {
			type: String,
			default: 'https://s1.ax1x.com/2020/09/16/wccswF.png'
		},
		title: {
			type: String,
			default: '默认标题'
		},
		startColor: {
			type: String,
			default: '#ff8a34'
		},
		endColor: {
			type: String,
			default: '#FBBD12'
		}
	})
	// 计算背景图片
	function calcBg() {
		let style = 'background-image: url(${url});'
		style = style.replace("${url}", props.bgImg);
		return style;
	}
	// 计算文字背景颜色
	function calcColor() {
		let style = 'background-image: -webkit-linear-gradient(0deg, ${1}, ${2});'
		style = style.replace("${1}", props.startColor);
		style = style.replace("${2}", props.endColor);
		return style;
	}
</script>
<style>
	.title-header {
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		/* padding: 40rpx 0 0 0; */
		font-weight: bold;
		background-size: cover;
	}

	.title-text {
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		/* border:10px solid #ddd;
      border-image: -webkit-linear-gradient(red,yellow);
     	border-image: -moz-linear-gradient(red,yellow);
      border-image: linear-gradient(red,yellow);  */
	}

	.title-index {
		background-image: -webkit-linear-gradient(0deg, #000, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>